<template>
  <div class="detail-panel">
    <div class="detail-title">属性</div>
    <LineProperties v-if="type === 'line' || type === 'twoBessel'
    || type === 'threeBessel' || type === 'quadratic'" :type="type" :selected-shape="model"  @change="change" />
    <TextProperties v-if="type === 'text'" :selected-shape="model" @change="change"/>
    <FourProperties v-if="type === 'four'" :selected-shape="model" @change="change"/>
    <RectProperties v-if="type === 'rect'" :selected-shape="model" @change="change"/>
    <LocationProperties  v-if="type === 'location'"  :selected-shape="model" @change="change" />
    <CarProperties v-if="type === 'car'" :selected-shape="model" @change="change"/>
    <MapProperties v-if="type === 'map' || type === 'canvas'" />
    <ContainerProperties v-if="type === 'container'" :selected-shape="model" @change="change"/>
    <CarLocationProperties v-if="type === 'carLocation' || type === 'charging'" :selected-shape="model" @change="change"/>
    <!--    <CarProperties  v-if="type === 'l'" :selected-shape="detailGraph" @change="change" />-->
<!--    <CarLocation v-if="selfState?.selectedModel?.clazz === 'carLocation'" :selected-model="selfState.selectedModel" @change="change" />-->
  </div>
</template>

<script>
import LineProperties from "./line";
import TextProperties from "./text";
import FourProperties from "./four";
import RectProperties from "./rect";
import CarProperties from "./car";
import MapProperties from "./map";
import LocationProperties from "./location";
import CarLocationProperties from "./carlocation";
import ContainerProperties  from "./container";

export default {
  props: {
    detailGraph: {
      type: Object,
    }
  },
  computed: {
  },
  watch: {
    detailGraph: {
      handler: function (detail){
        const self = this;
        console.log(detail);
        self.type  = detail.clazz;
        self.model = detail;
      },
      deep:false,
    }
  },
  name: 'App',
  data(){
    return {
      type: null,
      model: {},
    }
  },
  components: {
    LineProperties,
    TextProperties,
    FourProperties,
    RectProperties,
    CarProperties,
    MapProperties,
    LocationProperties,
    CarLocationProperties,
    ContainerProperties
  },
  mounted() {
  },

  methods: {
    change(param){
      this.$emit("change", param);
    },
  }
}
</script>
<style scoped lang="scss">
</style>
